<template>
  <div class="edit-page">
    <div class="page-header">
      <el-button class="back-button" icon="el-icon-back" @click="goback">返回</el-button>
      <div class="page-title">会议{{ this.form.id?'编辑':'新增' }}</div>
    </div>
    <div class="page-body">
      <el-form
        inline
        label-width="175px"
        :model="form"
        ref="form"
        :rules="rules"
      >
        <el-form-item prop="name" label="会议名称">
          <el-input v-model="form.name" size="mini" />
        </el-form-item>
        <el-form-item prop="publisherId" label="发布人">
          <el-select filterable @change="publisherChange" v-model="form.publisherId" size="mini" placeholder="请选择">
            <el-option
              v-for="item in personList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item prop="meetingTypeId" label="会议类型">
          <el-select v-model="form.meetingTypeId" size="mini" placeholder="请选择" >
            <el-option
              v-for="(item) in meetingList"
              :key="item.id"
              :value="item.id"
              :label="item.meetingTypeName"
            />
          </el-select>
        </el-form-item>
        <el-form-item prop="partyOrgId" label="所属党组织">
          <ClassifyTreeSelect @input="getBranchId" @getValue="getBranchNode" :value="form.partyOrgId" size="mini" />
        </el-form-item>
        <el-form-item prop="meetingModeratorId" label="会议主持人">
          <el-select filterable @change="meetingModeratorChange" v-model="form.meetingModeratorId" size="mini" placeholder="请选择">
            <el-option
              v-for="item in personList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item prop="meetingLeaveDTOList" label="参会人员">
          <el-select
            filterable
            @change="meetingLeaveChange"
            v-model="form.meetingLeaveDTOList"
            size="mini"
            placeholder="请选择"
            multiple
            collapse-tags
          >
            <el-option
              v-for="item in personList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item prop="startTime" label="开始时间">
          <el-date-picker
            v-model="form.startTime"
            size="mini"
            type="datetime"
            value-format="yyyy-MM-dd HH:mm:ss"
            placeholder="请选择"
          />
        </el-form-item>
        <el-form-item prop="meetingArea" label="会议地点">
          <el-input v-model="form.meetingArea" size="mini" />
        </el-form-item>
        <el-form-item label="是否可以请假">
          <el-radio-group v-model="form.isLeaveAbsence">
            <el-radio label="1">是</el-radio>
            <el-radio label="0">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="是否需要审批">
          <el-radio-group v-model="form.isApproveal">
            <el-radio label="1">是</el-radio>
            <el-radio label="0">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item prop="checkStartTime" style="width: calc(100% - 100px);" label="可签到时间设置">
          <el-date-picker
            v-model="form.checkTime"
            size="mini"
            type="datetimerange"
            value-format="yyyy-MM-dd HH:mm:ss"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            @change="checkTimeChange"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="会议附件">
          <el-upload
            action="#"
            :auto-upload="false"
            :multiple="true"
            :file-list="fileList"
          >
            <el-button icon="el-icon-upload2" size="mini">点击上传</el-button>
          </el-upload>
        </el-form-item>
      </el-form>
      <div class="titleStyle">
        <span>会议议题</span>
        <el-button type="success" size="mini" @click="add">添加</el-button>
      </div>
      <el-table
        :data="tableData"
      >
        <el-table-column align="center" type="index" label="序号" width="50" />
        <el-table-column align="center" label="会议议题">
          <template slot-scope="scope">
            <el-input size="mini" v-model="scope.row.topicTitle" />
          </template>
        </el-table-column>
        <el-table-column align="center" width="200" label="是否需要表决（同意/不同意）">
          <template slot-scope="scope">
            <el-select size="mini" v-model="scope.row.isVote">
              <el-option label="是" :value="true" />
              <el-option label="否" :value="false" />
            </el-select>
          </template>
        </el-table-column>
        <el-table-column width="80" align="center" label="操作">
          <template slot-scope="scope">
            <el-button
              type="text"
              size="mini"
              style="color:#F56C6C;"
              @click="del(scope.$index)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="page-footer">
      <el-button type="primary" size="mini" @click="sumbit">保存</el-button>
    </div>
  </div>
</template>
<script>
import ClassifyTreeSelect from '@/components/classifyTree/classifyTreeSelect.vue'
import { queryPersonList, add, edit, queryMeetingTypeList } from '@/api/cadreBusiness/meetingManagement'
export default {
  components: { ClassifyTreeSelect },
  data () {
    return {
      form: {},
      tableData: [],
      fileList: [],
      meetingList: [],
      personList: [],
      rules: {
        name: [ { required: true, message: '请输入会议名称', trigger: 'change' } ],
        publisherId: [ { required: true, message: '请选择发布人', trigger: 'change' } ],
        meetingTypeId: [ { required: true, message: '请选择会议类型', trigger: 'change' } ],
        partyOrgId: [ { required: true, message: '请选择所属党组织', trigger: 'change' } ],
        meetingLeaveDTOList: [ { required: true, message: '请选择参会人员', trigger: 'change' } ],
        startTime: [ { required: true, message: '请选择开始时间', trigger: 'change' } ],
        meetingArea: [ { required: true, message: '请输入会议地点', trigger: 'change' } ],
        checkStartTime: [ { required: true, message: '请选择可签到时间', trigger: 'change' } ]
      }
    }
  },
  methods: {
    init (row) {
      this.getMeetingList()
      this.getPersonList()
      this.form = { ...row }
      this.tableData = row.meetingTopicsVOList || []
    },
    getMeetingList () {
      queryMeetingTypeList().then((res) => {
        this.meetingList = res?.data || []
      })
    },
    getPersonList () {
      queryPersonList().then((res) => {
        this.personList = res?.data || []
      })
    },
    checkTimeChange (val) {
      this.checkStartTime = val[0]
      this.checkEndTime = val[1]
    },
    getBranchNode (node) {
      this.form.partyOrgId = node?.id || null
      this.form.partyOrgName = node?.fullNamePartyOrg || null
    },
    getBranchId (id) {
      // console.log('id', id)
    },
    publisherChange (val) {},
    goback () {
      this.form = {}
      this.tableData = []
      this.$emit('goback', false)
    },
    sumbit () {
      this.$refs.form.validate((valid) => {
        if (valid) {
          let submitForm = add
          if (this.form.id) {
            submitForm = edit
          }
          delete this.form.meetingLeaveVOList
          delete this.form.meetingAnnexesVOList
          delete this.form.meetingTopicsVOList
          this.form.meetingTopicsDTOList = this.tableData
          const obj = {
            ...this.form,
            meetingTopicsDTOList: this.tableData
          }
          submitForm(obj).then((res) => {
            this.$message.success('保存成功')
            this.form = {}
            this.tableData = []
            this.$emit('goback', true)
          })
        }
      })
      this.form = {}
      this.tableData = []
      this.$emit('goback', true)
    },
    meetingModeratorChange (val) {
      console.log(val, 'meetingModerator')
    },
    meetingLeaveChange (val) {
      console.log(val, 'meetingLeave')
    },
    add () {
      const obj = {}
      this.tableData.unshift(obj)
    },
    del (index) {
      const arr = JSON.parse(JSON.stringify(this.tableData))
      arr.splice(index, 1)
      this.tableData = arr
    }
  }
}
</script>
<style scoped lang="scss">
  .page-header {
    display: flex;
    height: 60px;
    align-items: center;
    border-bottom: 1px solid #ddd;
    .back-button {
      margin-right: 16px;
    }
    .page-title {
      font-size: 18px;
      font-weight: 600;
    }
  }
  .page-body {
    height: calc(100vh - 190px);
    overflow-y: auto;
    padding-top: 16px;
    .el-form-item {
      width: calc(50% - 24px);
      ::v-deep .el-input__inner {
        width: 300px;
      }
    }
    .titleStyle {
      font-weight: 600;
      height: 35px;
      line-height: 35px;
      padding-left: 10px;
      padding-right: 10px;
      margin-bottom: 8px;
      background-color: #d8eff9;
      display: flex;
      justify-content: space-between;
    }
  }
  .page-footer {
    height: 60px;
    text-align: center;
    line-height: 60px;
  }
</style>
